<template>
    <div class="task-list-wrap">
        <div style="flex: 1; flex-shrink: 0; overflow-y: hidden; display: flex; flex-direction: column">
            <flexbox justify="space-between" style="padding: 12px 0 0 16px">
                <span style="font-weight: bold; font-size: 15px">预发布版本</span>
                <span style="margin-right: 16px; font-size: 12px; color: #505a6e; cursor: pointer" @click="showMoreList">查看列表</span>
            </flexbox>
            <div
                v-infinite-scroll="getList"
                infinite-scroll-watch-disabled="scrollDisabled"
                :infinite-scroll-distance="100"
                style="flex: 1; flex-shrink: 0; overflow-y: auto"
            >
                <VersionItem :detail="item" v-for="item of list" :key="item.id" @success="handleSuccess"> </VersionItem>
                <div style="height: 44px" />
            </div>
        </div>
        <div class="add-wrap" :style="{ right: '16px' }">
            <flexbox justify="center" class="add-btn" style="flex-shrink: 0; width: calc(50% - 5px)" @click.stop="handleAddVersionNumber">
                <PlusOutlined />
                <span class="margin-l-8">新建版本号</span>
            </flexbox>
            <flexbox
                justify="center"
                class="add-btn"
                style="flex-shrink: 0; width: calc(50% - 5px); margin-left: 10px"
                @click.stop="handleAddVersion"
            >
                <PlusOutlined />
                <span class="margin-l-8">新建版本</span>
            </flexbox>
        </div>
        <CreateVersion ref="createVersionRef" @success="handleCreateVersionSuccess" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import CreateVersion from '@/views/version/versionList/components/CreateVersion.vue';
import { useRouter } from 'vue-router';
import VersionItem from './VersionItem.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, watch, nextTick } from 'vue';
export default defineComponent({
    components: {
        PlusOutlined,
        VersionItem,
        CreateVersion
    },
    props: {
        system: {
            type: Number,
            default: null
        },
        systemInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const router = useRouter();
        const requireListRef = ref<any>();
        const createVersionRef = ref();
        const state = reactive<any>({
            list: [],
            scrollDisabled: false,
            currIndex: -1,
            query: {
                pageNum: 1,
                pageSize: 20,
                system: null,
                status: '1,2'
            }
        });
        const getList = async (isRefresh = false) => {
            if (state.scrollDisabled) {
                return;
            }
            state.scrollDisabled = true;
            // 刷新值
            if (isRefresh) {
                const pageSize = state.query.pageNum * state.query.pageSize;
                const { success, moule, totalCount } = await api.versionModel.selectPage({
                    ...state.query,
                    pageNum: 1,
                    pageSize
                });
                if (success) {
                    state.list = [...moule];
                    state.total = totalCount;
                }
            } else {
                let { success, moule } = await api.versionModel.selectPage(state.query);
                if (success) {
                    moule = moule || [];
                    if (state.query.pageNum === 1) {
                        state.list = [...moule];
                    } else {
                        state.list = [...state.list, ...moule];
                    }
                    if (moule.length === state.query.pageSize) {
                        state.query.pageNum++;
                        state.scrollDisabled = false;
                    } else {
                        state.scrollDisabled = true;
                    }
                }
            }
        };
        const handleCreateVersionSuccess = () => {
            state.scrollDisabled = false;
            getList(true);
        };
        const getDetailData = async (id) => {
            const query = {
                id
            };
            const { moule } = await api.versionModel.findById(query);
            return moule;
        };
        const handleSuccess = async (detail) => {
            const index = state.list.findIndex((item) => item.id === detail.id);
            const data = await getDetailData(detail.id);
            if (index >= 0) {
                state.list[index] = {
                    ...data
                };
            }
        };
        const showMoreList = () => {
            router.push({
                path: '/version/versionList',
                query: {
                    systemId: props.system
                }
            });
        };
        // 新增版本
        const handleAddVersion = () => {
            unref(createVersionRef).open(props.system);
        };
        // 新增版本号
        const handleAddVersionNumber = () => {
            let query = {};
            if (!props.systemInfo.catalogCode) {
                return;
            }
            // 是否统一发版
            if (props.systemInfo.isUnifyRelease === '1') {
                query = {
                    catalogCode: props.systemInfo.parentCatalogCode,
                    catalogType: 1
                };
            } else {
                query = {
                    catalogCode: props.systemInfo.catalogCode,
                    catalogType: props.systemInfo.catalogType
                };
            }
            router.push({
                path: '/productAnalysis/versionControl',
                query
            });
        };

        watch(
            () => props.system,
            (n) => {
                state.scrollDisabled = false;
                state.query.pageNum = 1;
                state.query.system = n;
                getList();
            },
            { immediate: true }
        );
        return {
            requireListRef,
            createVersionRef,
            ...toRefs(state),
            getList,
            handleSuccess,
            showMoreList,
            handleAddVersionNumber,
            handleAddVersion,
            handleCreateVersionSuccess
        };
    }
});
</script>

<style scoped lang="less">
.task-list-wrap {
    width: 100%;
    height: calc(100vh - 135px);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    .add-wrap {
        position: absolute;
        bottom: 0;
        left: 0px;
        height: 44px;
        z-index: 100;
        background: #fff;
        padding: 0 0px 12px 16px;
        display: flex;

        .add-btn {
            background: rgba(23, 35, 61, 0.03);
            height: 100%;
            border: 1px dashed @primary-color;
            cursor: pointer;
        }
    }
}
</style>